import classNames from 'classnames';
import React, { useState } from 'react';
import styles from './index.less';

interface SelectTabFC {
  (index: number): void;
}

interface StateTabProps {
  className?: string;
  tabs?: [];
  defaultSelect?: number;
  selectTab: SelectTabFC;
}

const StateTab: React.FC<StateTabProps> = (props) => {
  const { children, className, tabs, defaultSelect = 1, selectTab } = props;
  const [stateIndex, setStateIndex] = useState<number>(defaultSelect);
  const handleTabState = (index: number) => {
    setStateIndex(index);
    selectTab(tabs[index]);
  };

  const stateList = tabs.map((item, index) => {
    if (item.key === 'title') {
      return <span key={index}>{item.text}</span>;
    }
    return (
      <span
        className={classNames(
          styles['tab-statu'],
          index === stateIndex ? styles['tab-statu-cur'] : '',
        )}
        onClick={() => {
          handleTabState(index);
        }}
        key={index}
      >
        {item.text}
      </span>
    );
  });
  return (
    <div className={classNames(styles['tab-view'], className)}>
      <div className={styles['tab-box']}>{stateList}</div>
      {children}
    </div>
  );
};

export default StateTab;
